1-5 开发效率加倍:typescript运行时比较
什么是 TypeScript 运行时
TypeScript 本身是一种语言,无法直接在 Node.js 或浏览器中运行。TypeScript 运行时是连接 TS 代码与运行环境(Node.js 的 CommonJS/ESM、浏览器的 ES5)之间的桥梁。
以一个简单的 index.ts 文件为例:
const a: number = 5;
console.log(a + 5);
typescript
- 直接用
node index.ts无法执行 - 传统方式:先用
tsc编译为index.js,再用node执行——每次开发都要编译很麻烦 - 使用
ts-node:需要先配置tsconfig.json(设置lib: ["dom"]),然后才能执行 - 使用
tsx:零配置,直接tsx index.ts即可执行
主流 TypeScript 运行时概览
主流的 TypeScript 运行时包括:
- tsx —— 基于 ESBuild 的零配置运行时
- @swc/register —— 基于 SWC(Rust)的运行时
- esbuild-runner —— ESBuild 封装
- jiti —— Nuxt 3 内部使用的运行时
- ts-node —— 最老牌的 TS 运行时
更多对比数据可参考:https://github.com/privatenumber/ts-runtime-comparison
下载量排行
从高到低:ts-node > ESBuild > jiti > SWC > tsx
从 npm trends 的下载趋势来看,ts-node 依然是下载量最高的,但 tsx 的增长势头很猛。jiti 从 2022 年开始下载量稳步上升,2023 年后超过 SWC。
功能对比
| 运行时 | 编译器 | 零配置 | ESM 支持 | CJS 作用域 | 缓存 | Watch 模式 | REPL |
|---|---|---|---|---|---|---|---|
| tsx | ESBuild | Yes | Full | Full | Yes | Yes | Yes |
| ts-node | TypeScript | No | Partial | Full | No | No | Yes |
| jiti | TypeScript | Yes | Good | Good | Yes | No | No |
| SWC | SWC | Yes | Partial | Partial | Yes | No | No |
| esbuild-runner | ESBuild | Yes | Partial | Partial | No | No | No |
关键差异说明
CJS 作用域(CommonJS Scope):在 .mjs 文件中使用 CommonJS 变量(module、exports、require、__filename、__dirname)。tsx 和 ts-node 的支持最好,SWC 存在部分语法不支持的问题。
模块解析(Resolution):能否正确解析 require/import 语句,包括 .cts、.mts 等下一代 TS 文件后缀名。tsx 支持最全面。
互操作性(Interoperability):能否在 TS 文件中 import 各种后缀的文件(.js、.ts、.mjs)。tsx 和 ESBuild 支持最好,ts-node 在 ES Module 文件上不支持。
各运行时详情
ts-node
最老牌的 TS 运行时,直接执行 TypeScript 代码,书写 ES6+ 语法。需要 tsconfig.json 配置,更新频次相对较低。
ESBuild / esbuild-runner
得益于 Vite、Rollup 等工具的火爆,下载量很高。ESBuild 用 Go 语言编写,速度极快。
jiti
从 2022 年开始下载量稳步上升,2023 年后超过 SWC。jiti 被 Nuxt 3 和 unbuild 等工具内部使用,用于编译 TypeScript 代码。Nuxt 虽然使用 Vite,但模块处理部分使用了 jiti。
SWC
用 Rust 编写的 TypeScript 编译器,速度非常快。被 NestJS、Turbopack 等工具采用。但在 ESM 转 CJS 时存在一些语法兼容性问题。
tsx
TypeScript Execute 的缩写(不是 JSX 的 TS 版本),八年前就有了但一直不温不火。功能支持最全面:零配置、完整的 ESM/CJS 支持、缓存、Watch 模式、REPL。内置使用 ESBuild 进行构建。
实际应用建议
| 场景 | 推荐运行时 | 原因 |
|---|---|---|
| 日常开发调试 | tsx | 零配置,功能最全,开发体验最好 |
| 库/框架开发 | tsx 或 jiti | 取决于目标运行环境 |
| NestJS 项目 | SWC(内置) | NestJS 原生支持 |
| 需要最大兼容性 | ts-node | 老牌稳定,社区支持好 |
重要提醒:这些工具都是运行时,用于开发调试阶段快速执行 TS 代码。最终的代码打包构建应该使用专门的构建工具(Webpack、Rollup、Vite 等),而不是运行时。
↑